<template>
  <div>
    <el-form
        label-position="right"
        label-width="100px"
        :model="user"
        style="max-width: 460px"
    >
      <el-form-item label="头像：">
        <img v-if="user !== null && user.uimg" :src="user.uimg" class="avatar"/>
        <el-button class="upbutton" @click="openUpload">更换头像</el-button>
      </el-form-item>
      <el-form-item label="昵称：">
        <el-input v-model="user.uname" disabled style="width: 170px"></el-input>
      </el-form-item>
      <el-form-item label="手机号：">
        <el-input v-model="user.uphone" disabled style="width: 170px"></el-input>
        <el-button type="primary" circle @click="this.upphone = true">
          <el-icon>
            <Edit/>
          </el-icon>
        </el-button>
      </el-form-item>
      <el-form-item label="密码：">
        <el-input type="password" v-model="user.upassword" disabled style="width: 170px"></el-input>
        <el-button type="primary" circle @click="this.uppwd = true">
          <el-icon>
            <Edit/>
          </el-icon>
        </el-button>
      </el-form-item>
      <el-form-item label="性别：">
        <el-input v-model="getGender" disabled style="width: 170px"></el-input>
      </el-form-item>
      <el-form-item label="实名信息：">
        {{ user.isreal === 1 ? '未实名' : '已实名' }}
        <svg v-if="user.isreal ===1" t="1691547222128" class="icon" viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg" p-id="4852" width="200" height="200">
          <path
              d="M886.784 746.496q29.696 30.72 43.52 56.32t-4.608 58.368q-4.096 6.144-11.264 14.848t-14.848 16.896-15.36 14.848-12.8 9.728q-25.6 15.36-60.416 8.192t-62.464-34.816l-43.008-43.008-57.344-57.344-67.584-67.584-73.728-73.728-131.072 131.072q-60.416 60.416-98.304 99.328-38.912 38.912-77.312 48.128t-68.096-17.408l-7.168-7.168-11.264-11.264-11.264-11.264q-6.144-6.144-7.168-8.192-11.264-14.336-13.312-29.184t2.56-29.184 13.824-27.648 20.48-24.576q9.216-8.192 32.768-30.72l55.296-57.344q33.792-32.768 75.264-73.728t86.528-86.016q-49.152-49.152-93.696-93.184t-79.872-78.848-57.856-56.832-27.648-27.136q-26.624-26.624-27.136-52.736t17.92-52.736q8.192-10.24 23.552-24.064t21.504-17.92q30.72-20.48 55.296-17.92t49.152 28.16l31.744 31.744q23.552 23.552 58.368 57.344t78.336 76.288 90.624 88.576q38.912-38.912 76.288-75.776t69.632-69.12 58.368-57.856 43.52-43.008q24.576-23.552 53.248-31.232t55.296 12.8q1.024 1.024 6.656 5.12t11.264 9.216 10.752 9.728 7.168 5.632q27.648 26.624 27.136 57.856t-27.136 57.856q-18.432 18.432-45.568 46.08t-60.416 60.416-70.144 69.632l-77.824 77.824q37.888 36.864 74.24 72.192t67.584 66.048 56.32 56.32 41.472 41.984z"
              p-id="4853" fill="#d81e06"></path>
        </svg>
        <svg v-if="user.isreal !==1" t="1691547338370" class="icon" viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg" p-id="5922" width="200" height="200">
          <path d="M817.728 198.72l111.744 114.56-545.216 532.128-285.92-273.024 110.528-115.712 174.176 166.336z"
                fill="#1afa29" p-id="5923"></path>
        </svg>
        <el-link v-if="user.isreal === 1" class="realref" @click="this.upreal = true">点击实名</el-link>
      </el-form-item>
      <el-form-item label="认证信息：">
        <div>{{ company !== null ? (company.cname === null ? '未认证' : company.cname) : '' }}</div>
      </el-form-item>
      <el-form-item label="注册时间：">
        {{ user.createdate }}
      </el-form-item>
      <el-form-item>
        <el-button type="primary" round @click="this.upOther = true">修改信息</el-button>
      </el-form-item>
    </el-form>
    <!--更换头像弹窗-->
    <el-dialog
        v-model="upimgflg"
        title="上传头像"
        width="30%"
    >
      <el-upload
          class="upload-demo"
          drag
          action="http://localhost:8081/upload"
          :on-success="upImg"
      >
        <el-icon class="el-icon--upload">
          <upload-filled/>
        </el-icon>
        <div class="el-upload__text">
          拖拽上传或 <em>点击这里选择文件</em>
        </div>
      </el-upload>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="upimgflg = false">取消</el-button>
        <el-button type="primary" @click="updavatar">
          确定
        </el-button>
      </span>
      </template>
    </el-dialog>

    <!--更改密码弹窗-->
    <el-dialog
        v-model="uppwd"
        title="更改密码"
        width="30%"
    >
      <el-form
          label-position="right"
          label-width="100px"
          :model="tempUser"
          style="max-width: 460px"
      >
        <el-form-item label="原密码：">
          <el-input type="password" v-model="tempUser.oldPass" style="width: 170px"></el-input>
        </el-form-item>
        <el-form-item label="新密码：">
          <el-input type="password" v-model="tempUser.upassword" style="width: 170px"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码：">
          <el-input type="password" v-model="tempUser.rePass" style="width: 170px"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="uppwd = false">取消</el-button>
        <el-button type="primary" @click="changeUppwd">
          确定
        </el-button>
      </span>
      </template>
    </el-dialog>

    <!--更改手机号弹窗-->
    <el-dialog
        v-model="upphone"
        title="更改手机号"
        width="30%"
    >
      <el-form
          label-position="right"
          label-width="100px"
          :model="tempUser"
          style="max-width: 460px"
      >
        <el-form-item label="手机号：">
          <el-input v-model="tempUser.uphone" style="width: 170px"></el-input>
        </el-form-item>
        <el-form-item label="验证码：">
          <el-input v-model="tempUser.verify" style="width: 170px"></el-input>
          <el-button plain @click="sendVerfy">获取验证码</el-button>
        </el-form-item>
      </el-form>

      <template #footer>
      <span class="dialog-footer">
        <el-button @click="upphone = false">取消</el-button>
        <el-button type="primary" @click="changePhone">
          确定
        </el-button>
      </span>
      </template>
    </el-dialog>

    <!--实名认证弹窗-->
    <el-dialog
        v-model="upreal"
        title="实名认证"
        width="30%"
    >
      <el-form
          label-position="right"
          label-width="100px"
          :model="tempUser"
          style="max-width: 460px"
      >
        <el-form-item label="身份证号：">
          <el-input v-model="tempUser.idnumber" style="width: 230px"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名：">
          <el-input v-model="tempUser.urealname" style="width: 230px"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="upreal = false">取消</el-button>
        <el-button type="primary" @click="checkReal">
          确定
        </el-button>
      </span>
      </template>
    </el-dialog>

    <!--其他信息弹窗-->
    <el-dialog
        v-model="upOther"
        title="实名认证"
        width="30%"
    >
      <el-form
          label-position="right"
          label-width="100px"
          :model="tempUser"
          style="max-width: 460px"
      >
        <el-form-item label="昵称：">
          <el-input v-model="tempUser.uname" style="width: 150px"></el-input>
        </el-form-item>
        <el-form-item label="性别：">
          <el-select style="width:100px" v-model="tempUser.ugender" class="m-2" placeholder="选择性别" size="Select">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="upOther = false">取消</el-button>
        <el-button type="primary" @click="submitOther">
          确定
        </el-button>
      </span>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import doThis from "@/api/getData";
import {ElMessage} from "element-plus";

export default {
  name: "UserIndex",
  data() {
    return {
      //显示的用户
      user: {
        uid: '',
        uname: '',
        upassword: '',
        uphone: '',
        ugender: '',
        uimg: '',
        isreal: '',
        idnumber: '',
        urealname: '',
        urole: '',
        createdate: '',
      },
      //性别
      options: [
        {value: '1', label: '女'},
        {value: '2', label: '男'},
      ],
      // 弹窗控制
      upimgflg: false,
      uppwd: false,
      upphone: false,
      upreal: false,
      upOther: false,
      // 需要更改的数据
      tempUser: {
        uphone: '',
        verify: '',
        oldPass: '',
        upassword: '',
        rePass: '',
        idnumber: '',
        urealname: '',
        uimg: '',
        uname: '',
        ugender: '',
      },
      //实名信息
      company: {}
    }
  },
  computed: {
    getGender() {
      if (this.user.ugender === '1') {
        return "女"
      } else {
        return "男"
      }
    }
  },
  methods: {
    // 更改图片弹窗
    openUpload() {
      this.upimgflg = true;
    },
    upImg(e) {
      this.tempUser.uimg = e.data.url
    },
    // 上传图片弹窗
    updavatar() {
      doThis.doGet("/user/update", this.user).then(res => {
        if (res.code === "0") {
          this.upimgflg = false;
          this.user.uimg = this.tempUser.uimg
          doThis.doGet("/user/update", this.user)
          this.$emit("userReload")
          this.$router.go(0)
          window.location.reload()

        }
      })
    },
    // 刷新用户
    refresh() {
      doThis.doGet("/user/findId", this.user).then(res => {
        this.user = res.data
        localStorage.setItem("user", JSON.stringify(res.data))
      })
    },
    // 修改密码
    changeUppwd() {
      if (this.tempUser.oldPass !== this.user.upassword) {
        // alert("原密码输入错误")
        ElMessage.error('原密码输入错误')
      } else if (this.tempUser.upassword !== this.tempUser.rePass) {
        // alert("两次密码不一致")
        ElMessage.error('两次密码不一致')
      } else if (this.tempUser.upassword === this.user.upassword) {
        // alert("旧密码不能与新密码一致")
        ElMessage.error('旧密码不能与新密码一致')
      } else {
        this.user.upassword = this.tempUser.upassword
        doThis.doGet("/user/update", this.user).then(res => {
          if (res.code === "0") {
            this.refresh()
            this.uppwd = false;
            window.location.reload()
          }
        })
      }
    },
    // 修改手机号
    changePhone() {
      doThis.doGet("/user/checkVerfy", {uphone: this.tempUser.uphone, verify: this.tempUser.verify})
          .then(res => {
            if (res.code === '0') {
              this.user.uphone = this.tempUser.uphone
              doThis.doGet("/user/update", this.user)
              this.upphone = false
              window.location.reload()
            } else {
              // alert("验证码错误")
              ElMessage.error('验证码错误')
            }
          })
    },
    // 发送验证码
    sendVerfy() {
      doThis.doGet("/user/sendVefy", {phone: this.tempUser.uphone}).then(res => {
        // alert(res.msg)
        if (res.code === "0") {
          ElMessage({
            message: res.msg,
            type: 'success',
          })
          // this.toLogin()
        } else {
          ElMessage.error(res.msg)
        }
      })
    },
    //实名认证
    checkReal() {
      doThis.doGet("/user/checkRealName", {idnumber: this.tempUser.idnumber, urealname: this.tempUser.urealname})
          .then(res => {
            if (res.code === '0') {
              this.user.idnumber = this.tempUser.idnumber
              this.user.urealname = this.tempUser.urealname
              this.user.isreal = 2
              doThis.doGet("/user/update", this.user)
              this.upreal = false
              window.location.reload()
            } else {
              // alert(res.msg)
              ElMessage.error(res.msg)
            }
          })
    },
    //提交其他信息
    submitOther() {
      this.user.ugender = this.tempUser.ugender
      this.user.uname = this.tempUser.uname
      doThis.doGet("/user/update", this.user)
      this.upOther = false
      window.location.reload()
    },
    getCompany() {
      doThis.doGet("/company/getUser").then(res => {
        this.company = res.data
        console.log(this.company)
      })
    },

  },
  mounted() {
    let user = JSON.parse(localStorage.getItem("user"))
    if (user === null){
      this.$router.push("/login")
    }
    this.user = user
    this.refresh()
    this.getCompany()

  },
  watch: {
    user() {
      this.$emit("flush", this.user)
    }
  },

}
</script>

<style scoped>
.avatar {
  border-radius: 50%;
  width: 178px;
  height: 178px;
}

.upbutton {
  margin: auto auto 0 20px;
}

.realref {
  margin-left: 20px;
}
</style>